<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Module</title>
	</head>
	<body>
		<p>历史上，JavaScript 一直没有模块（module）体系，无法将一个大程序拆分成互相依赖的小文件，再用简单的方法拼装起来。其他语言都有这项功能，比如 Ruby 的require、Python
			的import，甚至就连 CSS 都有@import，但是 JavaScript 任何这方面的支持都没有，这对开发大型的、复杂的项目形成了巨大障碍。</p>
		<p>在 ES6 之前，社区制定了一些模块加载方案，最主要的有 CommonJS 和 AMD 两种。前者用于服务器，后者用于浏览器。ES6 在语言标准的层面上，实现了模块功能，而且实现得相当简单，完全可以取代
			CommonJS 和 AMD 规范，成为浏览器和服务器通用的模块解决方案。</p>
		<p>ES6 模块的设计思想是尽量的静态化，使得编译时就能确定模块的依赖关系，以及输入和输出的变量。CommonJS 和 AMD 模块，都只能在运行时确定这些东西。比如，CommonJS
			模块就是对象，输入时必须查找对象属性。</p>

		<!-- 浏览器对于带有type="module"的<script>，都是异步加载，不会造成堵塞浏览器，即等到整个页面渲染完，再执行模块脚本，等同于打开了<script>标签的defer属性。 -->
		<script src="js/test.js" type="module" charset="utf-8"></script>
		<!-- ES6 模块也允许内嵌在网页中，语法行为与加载外部脚本完全一致 -->
		<script type="module">
			import * as calculator from "./js/calculator.js";
			console.log(calculator.division(90, 3)); //30
		</script>
	</body>
</html>
